<template>
    <view class="weather-container">
        <page-header title="环境气象"></page-header>

        <view class="content">
            <!-- 监测标题和时间 -->
            <view class="monitoring-header">
                <text class="monitoring-title">环境气象监测</text>
                <view class="time-info">
                    <image class="clock-icon" src="/static/images/time.png"></image>
                    <text class="time-text">检测时间:{{ detectionTime }}</text>
                </view>
            </view>

            <!-- 气象参数列表 -->
            <view class="weather-params">
                <view class="param-item" v-for="(param, index) in weatherParams" :key="index">
                    <view class="param-icon">
                        <image :src="param.icon" class="icon-image"></image>
                    </view>
                    <view class="param-content">
                        <text class="param-label">{{ param.label }}</text>
                        <text class="param-value">{{ param.value }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import PageHeader from '@/components/PageHeader/index.vue'

export default {
    components: {
        PageHeader,
    },
    data() {
        return {
            detectionTime: '2023-11-15 14:30:25',
            weatherParams: [
                {
                    label: '光照强度',
                    value: '17545 lux',
                    icon: '/static/images/weatherMonitoring/c1.png',
                },
                {
                    label: '降雨量',
                    value: '3.6 mm',
                    icon: '/static/images/weatherMonitoring/c2.png',
                },
                {
                    label: '今日降雨',
                    value: '0.2mm',
                    icon: '/static/images/weatherMonitoring/c3.png',
                },
                {
                    label: '空气湿度',
                    value: '75%',
                    icon: '/static/images/weatherMonitoring/c4.png',
                },
                {
                    label: '空气温度',
                    value: '29℃',
                    icon: '/static/images/weatherMonitoring/c5.png',
                },
                {
                    label: '今日最高',
                    value: '30℃',
                    icon: '/static/images/weatherMonitoring/c6.png',
                },
                {
                    label: '今日最低',
                    value: '24℃',
                    icon: '/static/images/weatherMonitoring/c7.png',
                },
            ],
        }
    },
    mounted() {
        this.updateDetectionTime()
    },
    beforeDestroy() {
        // 清除定时器
        if (this.timer) {
            clearInterval(this.timer)
        }
    },
    methods: {
        // 更新检测时间 - 获取昨天的日期
        updateDetectionTime() {
            const now = new Date()
            const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000) // 减去24小时
            const year = yesterday.getFullYear()
            const month = String(yesterday.getMonth() + 1).padStart(2, '0')
            const day = String(yesterday.getDate()).padStart(2, '0')
            this.detectionTime = `${year}-${month}-${day} 14:30:25`
        },
    },
}
</script>

<style lang="scss">
.weather-container {
    min-height: 100vh;
    background-color: #f5f5f5;

    .refresh-btn {
        padding: 10rpx 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .refresh-text {
            font-size: 28rpx;
            color: #fff;
        }
    }

    .content {
        padding: 20rpx;

        .monitoring-header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            margin-bottom: 30rpx;

            .monitoring-title {
                display: block;
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
            }

            .time-info {
                display: flex;
                align-items: center;

                .clock-icon {
                    width: 24rpx;
                    height: 24rpx;
                    margin-right: 10rpx;
                }

                .time-text {
                    font-size: 24rpx;
                    color: #666;
                }
            }
        }

        .weather-params {
            .param-item {
                background-color: #fff;
                border-radius: 16rpx;
                padding: 30rpx 20rpx;
                margin-bottom: 20rpx;
                display: flex;
                align-items: center;
                box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

                .param-icon {
                    width: 60rpx;
                    height: 60rpx;
                    margin-right: 20rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .icon-image {
                        width: 40rpx;
                        height: 40rpx;
                    }
                }

                .param-content {
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .param-label {
                        font-family: OPPOSans, OPPOSans;
                        font-weight: 500;
                        font-size: 28rpx;
                        color: #4a4a4a;
                    }

                    .param-value {
                        font-size: 28rpx;
                        color: #27C95D;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}
</style>
